<template>
  <div class="box-item">
    <div class="box-title">发货量趋势</div>
    <div class="box-body">
      <Echart id="leftCenter" v-if="pageflag" :options="options" class="left_center_inner" ref="charts"
        height="240px" />
    </div>
  </div>
</template>

<script>
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改
import { colorsA, colorsD, legend, xAxis, yAxis } from '@/config/EChartVar';

export default {
  name: 'DJtopleft',
  data() {
    return {
      options: {},
      tag: 1,
      countUserNumData: {
        axisData: ['6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        seriesData0: [58, 78, 96, 82, 73, 77, 60],
        seriesData1: [50, 88, 86, 75, 80, 84, 70],
      },
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() { this.clearData(); },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;

      this.$nextTick(() => {
        this.init(this.countUserNumData);
      });
    },
    init(currentData) {
      // let axisData = ["2021年", "2022年", "2023年", "2024年"];
      let axisData = currentData.axisData;
      let seriesData = [
        [...currentData.seriesData0],
        [...currentData.seriesData1],
      ];

      let maxCity1 =
        axisData[seriesData[0].indexOf(Math.max(...seriesData[0]))];
      let maxCity2 =
        axisData[seriesData[1].indexOf(Math.max(...seriesData[1]))];
      const options = {
        // backgroundColor: "#0F224C", //背景色
        grid: {
          top: '18%',
          left: '4%',
          right: '8%',
          bottom: '6%',
          containLabel: true,
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     lineStyle: {
        //       color: "rgba(255,255,255,0.7)",
        //     },
        //   },
        //   backgroundColor: "rgba(255,255,255,0.1)",
        //   padding: [5, 10],
        //   textStyle: {
        //     color: "rgb(255,255,255)",
        //   },
        // },
        legend: {
          // x: "center",
          // y: "25",
          top: '0px',
          right: '10%',
          // icon: 'circle',
          itemWidth: 8,
          itemHeight: 4,
          // itemGap: 60,
          textStyle: legend.textStyle,
          data: ['票数', '重量'],
        },
        xAxis: {
          type: 'category',
          data: axisData,
          // boundaryGap: false,
          boundaryGap: true,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            // max: 1200,
            // min: 200, //
            // interval: 200,
            axisLabel: yAxis.axisLabel,
            axisLine: {
              show: false,
              // interval: 1,
              lineStyle: {
                color: 'rgba(0,0,0,0.5)',
              },
            },
            splitLine: {
              show: true,
              // interval: 1,
              lineStyle: {
                color: ['rgba(176, 215, 255, 0.2)'],
                width: 1,
                type: 'dashed',
              },
            },
            // splitLine: {
            //   show: false,
            // },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [],
      };
      const series = [
        {
          name: '票数',
          type: 'bar',
          // 动画配置
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          smooth: true,
          // showSymbol: false,
          symbol: 'none',
          // showSymbol: true,
          // symbol: 'circle',
          data: seriesData[0],
          // areaStyle: {
          //   color: colorsB[1],
          // },
          itemStyle: {
            normal: {
              color: colorsD[0],
            },
          },
          barWidth: 8,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          // label: {
          //   show: true,
          //   position: 'top',
          //   formatter: (par) => {
          //     return par.value + '票';
          //   },
          //   textStyle: { fontSize: 11, color: '#FFF' },
          // },
          markPoint: {
            symbol: 'none',
            symbolSize: [14, 14], // 容器大小
            symbolOffset: ['0%', '0%'],
            data: [
              {
                name: '最大值',
                type: 'max',
                valueIndex: 1,
              },
            ],
            label: {
              show: false,
              position: 'top',
              fontSize: 11,
              color: '#FFAB07',
            },
          },
        },
        {
          name: '重量',
          type: 'bar',
          // 动画配置
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          smooth: true,
          // showSymbol: false,
          symbol: 'none',
          symbolSize: 6,
          data: seriesData[1],
          itemStyle: {
            normal: {
              // color: "#38FFBA",
              color: colorsD[1],
            },
          },
          barGap: '-10%',
          barWidth: 8,
          lineStyle: {
            normal: {
              width: 2,
            },
          },

          // label: {
          //   show: true,
          //   position: 'top',
          //   formatter: (par) => {
          //     return par.value + '万';
          //   },
          //   textStyle: { fontSize: 11, color: '#FFF' },
          // },
          markPoint: {
            symbol: 'none',
            symbolSize: [14, 14], // 容器大小
            symbolOffset: ['0%', '0%'],
            data: [
              {
                name: '最大值',
                type: 'max',
                valueIndex: 1,
              },
            ],
            label: {
              show: false,
              position: 'top',
              fontSize: 11,
              color: '#38FFBA',
            },
          },
        },
      ];
      options.series = series;
      this.options = options;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-item {
  width: 297px;
  height: 292px;
  background: url('../../../assets/img/launch/internet/homeTopbox.png') no-repeat center;
  background-position: center center;
  background-size: 100% 100%;
  // margin-bottom: 25px;

  .box-title {
    position: relative;
    height: 55px;
    line-height: 55px;
    text-indent: 1em;
    font-size: 18px;
    font-weight: 600;

    &::after {
      position: absolute;
      top: -2px;
      content: url('../../../assets/img/launch/pack/pack_nav.png');
    }
  }

  .box-body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    // height: 320px;


    .chart-container {
      position: relative;
      width: 100%;
      height: 160px;

      .left_center_inner,
      .bg {
        width: 100%;
        height: 100%;
      }

      .left_center_inner {
        left: 5px;
        top: -75px;
        z-index: 1;
        // border: 1px solid red;
      }
    }
  }
}
</style>